
<style>

</style>
<template>
  
  <el-main>
    <!-- <el-alert
        title="功能提示"
        description="借阅状态(提前已归还0,按时已归还1,按时未归还2,逾期已归还3,逾期未归还4)。数据状态（书籍未归档0，数据已归档1）"
        type="success"
        show-icon
        :closable="false"
      /> -->
    <el-tabs type="border-card">
      <el-tab-pane>
        <span slot="label"><i class="el-icon-folder"></i> 图书名字</span>
        <div style="margin: 10px 0">
          <el-input style="width: 200px" placeholder="请输入图书名字" suffix-icon="el-icon-search" v-model="bookName"></el-input>
          <el-button style="margin-left: 5px" type="primary" @click="selectByBookName">搜索</el-button>
          <el-button type="warning" @click="reset">重置</el-button>
        </div>
      </el-tab-pane>
      <el-tab-pane>
        <span slot="label"><i class="el-icon-user"></i>借阅人名</span>
        <div style="margin: 10px 0">
          <el-input style="width: 200px" placeholder="请输入借阅人名" suffix-icon="el-icon-search" v-model="userName"></el-input>
          <el-button style="margin-left: 5px" type="primary" @click="selectByMemberName">搜索</el-button>
          <el-button type="warning" @click="reset">重置</el-button>
        </div>
      </el-tab-pane>
      <el-tab-pane>
        <span slot="label"><i class="el-icon-date"></i>借阅开始时间</span>
        <div style="margin: 10px 0">
          <el-input style="width: 200px" placeholder="请输入借阅开始时间" suffix-icon="el-icon-search" v-model="time"></el-input>
          <el-button style="margin-left: 5px" type="primary" @click="selectByCreateTime">搜索</el-button>
          <el-button type="warning" @click="reset">重置</el-button>
        </div>
      </el-tab-pane>
      <el-tab-pane>
        <span slot="label"><i class="el-icon-news"></i>借阅状态</span>
        <div style="margin: 10px 0">
          <el-input style="width: 200px" placeholder="请输入借阅状态" suffix-icon="el-icon-search" v-model="stauts"></el-input>
          <el-button style="margin-left: 5px" type="primary" @click="selectByStauts">搜索</el-button>
          <el-button type="warning" @click="reset">重置</el-button>
        </div>
      </el-tab-pane>
      <el-tab-pane>
        <span slot="label"><i class="el-icon-document"></i>可借阅书籍</span>
        <div style="margin: 10px 0">
          <el-input style="width: 200px" placeholder="请输入ID" suffix-icon="el-icon-search" v-model="id"></el-input>
          <el-button style="margin-left: 5px" type="primary" @click="selectByLoan">搜索</el-button>
          <el-button type="warning" @click="reset">重置</el-button>
        </div>
      </el-tab-pane>
      <el-tab-pane>
        <span slot="label"><i class="el-icon-document"></i>不可借阅书籍</span>
        <div style="margin: 10px 0">
          <el-input style="width: 200px" placeholder="请输入ID" suffix-icon="el-icon-search" v-model="idx"></el-input>
          <el-button style="margin-left: 5px" type="primary" @click="selectByNoLoan">搜索</el-button>
          <el-button type="warning" @click="reset">重置</el-button>
        </div>
      </el-tab-pane>
    </el-tabs>
    <el-row style="margin: 10px 0">
      <el-button type="primary" @click="handleBorrow" round>借阅图书<i class="el-icon-remove-outline"></i></el-button>
      <el-button type="success" @click="handleReturn" round>归还图书<i class="el-icon-circle-plus-outline"></i></el-button>
      <el-button type="warning" @click="handleAdd" round>增加<i class="el-icon-circle-plus-outline"></i></el-button>
    </el-row>
    <el-table
    :data="tableData"
    border
    style="width: 100%">
    <!-- <el-table-column
      fixed
      prop="id"
      label="ID"
      align="center">
    </el-table-column> -->
    <el-table-column
      prop="bookId"
      label="图书ID"
      align="center">
    </el-table-column>
    <el-table-column
      prop="memberId"
      label="会员ID"
      align="center">
    </el-table-column>
    <el-table-column
      prop="createTime"
      label="开始时间"
      width="200"
      align="center">
    </el-table-column>
    <el-table-column
      prop="endTime"
      label="结束时间"
      width="200"
      align="center">
    </el-table-column>
    <el-table-column
      prop="total"
      label="总计(价格)"
      align="center">
    </el-table-column>
    <el-table-column
      prop="loanStauts"
      label="借阅状态"
      :show-overflow-tooltip="true"
      :formatter="statusFormatter"
      align="center">
    </el-table-column>
    <el-table-column
      prop="dataStauts"
      label="数据状态"
      :show-overflow-tooltip="true"
      :formatter="statusFormatters"
      align="center">
    </el-table-column>
      <el-table-column
        label="操作"
        align="center"
        width="200">
        <template slot-scope="scope">
          <el-button @click="handleEdit(scope.row)" type="success" size="small">编辑 <i class="el-icon-edit"></i></el-button>
            
            <el-popconfirm
            style="margin-left: 5px"
              confirm-button-text='确定'
              cancel-button-text='我再想想'
              icon="el-icon-info"
              icon-color="red"
              title="确定删除吗？"
              @confirm="handleDelete(scope.row.id)"
            >
            <el-button slot="reference" type="danger" size="small">删除 <i class="el-icon-remove-outline"></i></el-button>
          </el-popconfirm>
        </template>
      </el-table-column>
    </el-table>
      <div style="padding: 10px 0">
        <el-pagination
          @size-change="handleSizeChange"
          @current-change="handleCurrentChange"
          :current-page="currentPage"
          :page-sizes="[10, 20, 30, 50]"
          :page-size="pageSize"
          layout="total, sizes, prev, pager, next, jumper"
          :total="total">
        </el-pagination>
      </div>


    <el-dialog title="借阅信息" :visible.sync="borrowDialogFormVisible" width="30%">
    <el-form label-width="80px" size="small" :model="form">
      <el-form-item label="图书ID" 
        prop="bookId"
        :label-width="formLabelWidth">
        <el-input v-model="form.bookId" autocomplete="off"></el-input>
      </el-form-item>
      <el-form-item label="会员ID" 
        prop="memberId"
        :label-width="formLabelWidth">
        <el-input v-model="form.memberId" autocomplete="off"></el-input>
      </el-form-item>
      <el-form-item label="开始时间" 
        prop="createTime"
        :label-width="formLabelWidth">
        <el-input v-model="form.createTime" autocomplete="off"></el-input>
      </el-form-item>
      <el-form-item label="结束时间" 
        prop="endTime"
        :label-width="formLabelWidth">
        <el-input v-model="form.endTime" autocomplete="off"></el-input>
      </el-form-item>
    </el-form>
    <div slot="footer" class="dialog-footer">
      <el-button @click="borrowDialogFormVisible = false">取 消</el-button>
      <el-button type="primary" @click="saveBorrow">确 定</el-button>
    </div>
  </el-dialog>

<el-dialog title="借阅信息" :visible.sync="returnDialogFormVisible" width="30%">
    <el-form label-width="80px" size="small" :model="forms">
      <el-form-item label="ID" 
        prop="id"
        :label-width="formLabelWidth">
        <el-input v-model="forms.id" autocomplete="off"></el-input>
      </el-form-item>
      <el-form-item label="图书ID" 
        prop="bookId"
        :label-width="formLabelWidth">
        <el-input v-model="forms.bookId" autocomplete="off"></el-input>
      </el-form-item>
      <el-form-item label="会员ID" 
        prop="memberId"
        :label-width="formLabelWidth">
        <el-input v-model="forms.memberId" autocomplete="off"></el-input>
      </el-form-item>
      <el-form-item label="开始时间" 
        prop="createTime"
        :label-width="formLabelWidth">
        <el-input v-model="forms.createTime" autocomplete="off"></el-input>
      </el-form-item>
      
    </el-form>
    <div slot="footer" class="dialog-footer">
      <el-button @click="returnDialogFormVisible = false">取 消</el-button>
      <el-button type="primary" @click="saveReturn">确 定</el-button>
    </div>
  </el-dialog>  


  <el-dialog title="借阅信息" :visible.sync="DialogFormVisible" width="30%">
    <el-form label-width="80px" size="small" :model="returnForm">
      <el-form-item label="图书ID" 
        prop="bookId"
        :label-width="formLabelWidth">
        <el-input v-model="returnForm.bookId" autocomplete="off"></el-input>
      </el-form-item>
      <el-form-item label="会员ID" 
        prop="memberId"
        :label-width="formLabelWidth">
        <el-input v-model="returnForm.memberId" autocomplete="off"></el-input>
      </el-form-item>
      <el-form-item label="开始时间" 
        prop="createTime"
        :label-width="formLabelWidth">
        <el-input v-model="returnForm.createTime" autocomplete="off"></el-input>
      </el-form-item>
      <el-form-item label="结束时间" 
        prop="endTime"
        :label-width="formLabelWidth">
        <el-input v-model="returnForm.endTime" autocomplete="off"></el-input>
      </el-form-item>
      <el-form-item label="总计(价格)" 
        prop="total"
        :label-width="formLabelWidth">
        <el-input v-model="returnForm.total" autocomplete="off"></el-input>
      </el-form-item>
      <el-form-item label="借阅状态" 
        prop="loanStauts"
        :label-width="formLabelWidth">
        <el-input v-model="returnForm.loanStauts" autocomplete="off"></el-input>
      </el-form-item>
      <el-form-item label="数据状态" 
        prop="dataStauts"
        :label-width="formLabelWidth">
        <el-input v-model="returnForm.dataStauts" autocomplete="off"></el-input>
      </el-form-item>
    </el-form>
    <div slot="footer" class="dialog-footer">
      <el-button @click="DialogFormVisible = false">取 消</el-button>
      <el-button type="primary" @click="save">确 定</el-button>
    </div>
  </el-dialog>
  <el-dialog title="借阅信息" :visible.sync="insertDialogFormVisible" width="30%">
    <el-form label-width="80px" size="small" :model="returnForm">
      <el-form-item label="图书ID" 
        prop="bookId"
        :label-width="formLabelWidth">
        <el-input v-model="returnForm.bookId" autocomplete="off"></el-input>
      </el-form-item>
      <el-form-item label="会员ID" 
        prop="memberId"
        :label-width="formLabelWidth">
        <el-input v-model="returnForm.memberId" autocomplete="off"></el-input>
      </el-form-item>
      <el-form-item label="开始时间" 
        prop="createTime"
        :label-width="formLabelWidth">
        <el-input v-model="returnForm.createTime" autocomplete="off"></el-input>
      </el-form-item>
      <el-form-item label="结束时间" 
        prop="endTime"
        :label-width="formLabelWidth">
        <el-input v-model="returnForm.endTime" autocomplete="off"></el-input>
      </el-form-item>
      <el-form-item label="总计(价格)" 
        prop="total"
        :label-width="formLabelWidth">
        <el-input v-model="returnForm.total" autocomplete="off"></el-input>
      </el-form-item>
      <el-form-item label="借阅状态" 
        prop="loanStauts"
        :label-width="formLabelWidth">
        <el-input v-model="returnForm.loanStauts" autocomplete="off"></el-input>
      </el-form-item>
      <el-form-item label="数据状态" 
        prop="dataStauts"
        :label-width="formLabelWidth">
        <el-input v-model="returnForm.dataStauts" autocomplete="off"></el-input>
      </el-form-item>
    </el-form>
    <div slot="footer" class="dialog-footer">
      <el-button @click="insertDialogFormVisible = false">取 消</el-button>
      <el-button type="primary" @click="insert">确 定</el-button>
    </div>
  </el-dialog>
  </el-main>
</template>

<script>
import request from "../utils/request";
export default{
    name: 'Loan',
    data() {
      return {
        tableData: [],
        bookName: '',
        userName: '',
        time: '',
        stauts: '',
        id: '',
        idx: '',
        bookId: "",
        memberId: "",
        createTime: "",
        endTime: "",
        total: "",
        pageSize: 10,
        currentPage: 1,
        total: 0,
        borrowDialogFormVisible: false,
        DialogFormVisible: false,
        returnDialogFormVisible: false,
        insertDialogFormVisible: false,
        form: {
          bookId: "",
          memberId: "",
          createTime: "",
          endTime: "",
          loanStauts: "",
          dataStauts: "",
        },
        forms: {
          id: "",
          bookId: "",
          memberId: "",
          createTime: "",
          endTime: "",
          total: ""
        },
        returnForm: {
          bookId: "",
          memberId: "",
          createTime: "",
          endTime: "",
          total: "",
          loanStauts: "",
          dataStauts: "",
        },
        formLabelWidth: '80px'
      };
    },
    created() {
      this.load();
    },
    methods: {
      statusFormatter(res, column){
				const status = res.loanStauts
      			if (status == 0) {
        			return '提前已归还'
      			} else if (status == 1) {
        			return '按时已归还'
      			} else if (status == 2) {
        			return '按时未归还'
      			} else if (status == 3) {
			        return '逾期已归还'
      			} else {
        			return '逾期未归还'
      			}
			},
      statusFormatters(res, column){
				const status = res.dataStauts
      			if (status == 0) {
        			return '书籍未归档'
      			}  else {
        			return '书籍已归档'
      			}
			},
      handleAdd() {
        this.insertDialogFormVisible = true
        this.returnForm = {}
      },
      insert() {
        request.post("/loan/insert",this.returnForm).then(res => {
          this.$message.success("添加成功")
          this.insertDialogFormVisible = false
          this.load()
        })
      },
      handleBorrow() {
        this.borrowDialogFormVisible = true
        this.form = {}
      },
      saveBorrow() {
        request.post("/loan/borrow",this.form).then(res => {
          this.$message.success("借阅成功")
          this.borrowDialogFormVisible = false
          this.load()
        })
      },
      handleReturn() {
        this.returnDialogFormVisible = true
        this.forms = {}
      },
      saveReturn() {
        request.post("/loan/return",this.forms).then(res => {
          this.$message.success("归还成功")
          this.returnDialogFormVisible = false
          this.load()
        })
      },
      handleEdit(row) {
        this.DialogFormVisible = true
        this.returnForm = row
      },
      save() {
        request.post("/loan/update", this.returnForm).then(res => {
            this.$message.success("修改成功")
            this.DialogFormVisible = false
            this.load()
        })
      },
      handleDelete(id) {
        request.get("/loan/delete?id="+id).then(res => {
            this.$message.success("删除成功")
            this.load()
        })
      },
      load() {
        request.post("/loan/findPage",
           { 
            currentPage: this.currentPage,
            pageSize: this.pageSize
        }).then(res => {
          console.log(res)
          this.tableData = res.list
          this.total = res.total
        })
      },
      selectByBookName() {
        request.post("/loan/selectByBookName",this.bookName).then(res => {
          console.log(res)
          this.tableData = res
        })
      },
      selectByMemberName() {
        request.post("/loan/selectByMemberName",this.userName).then(res => {
          console.log(res)
          this.tableData = res
        })
      },
      selectByCreateTime() {
        request.post("/loan/selectByTime",this.time).then(res => {
          console.log(res)
          this.tableData = res
        })
      },
      selectByStauts() {
        request.post("/loan/selectByStauts",this.stauts).then(res => {
          console.log(res)
          this.tableData = res
        })
      },
      selectByLoan() {
        request.post("/loan/selectLoan",this.id).then(res => {
          console.log(res)
          this.tableData = res
        })
      },
      selectByNoLoan() {
        request.post("/loan/selectNoLoan",this.idx).then(res => {
          console.log(res)
          this.tableData = res
        })
      },
      reset() {
        this.bookName = ""
        this.userName = ""
        this.time = ""
        this.stauts = ""
        this.id = ""
        this.idx = ""
        this.load()
      },
      handleSizeChange(pageSize) {
        console.log(pageSize)
        this.pageSize = pageSize
        this.load()
      },
      handleCurrentChange(currentPage) {
        console.log(currentPage)
        this.currentPage = currentPage
        this.load()
      }
    }
}
</script>